<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 练习</title>
    <style>
        .sanjiao {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            /* border-color: transparent #0099CC transparent transparent; */
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg);
            /*顺时针旋转90°*/
        }
    </style>
</head>
<!-- 页面渲染html的过程
1、浏览器解析HTML 源码 然后创建一个DOM 树 。并行请求 css/image/js 在DOM 树中，每一个HTML 标签都有一个对应的节点，并且每一个文本都有一个对应的文本节点。DOM树的根节点就是documentElement 对应的是html 标签。
2、浏览器解析CSS 代码 计算出最终的样式数据。构建CSSOM 树。对CSS 代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置<用户设置<外链样式<内联样式<html 中的style
3、DOM Tree + CSSOM->渲染树（ rendering tree ）。渲染树和DOM树有点像，但是是有却别的。

DOM 树完全和html 标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head display:none的元素。而且一大段文本汇总的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应CSS的属性。
4、一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
-->

<body>
    <div>
        <div class="sanjiao"></div>
    </div>
</body>

</html>